<template>
	<view>
		<view  class="container">
			<view v-for="item in recommendData">
				<image :src="item.imagePath" class="product-img"></image>
				<view>
					<text>{{item.name}}</text>
					<view class="flex-bt">
						<view class="product-info">
							<text>180.0万</text>
							<image src="/static/mengbanzu278.png" class="watch-img"></image>
						</view>
						<view class="product-info">
							<text>3.9万</text>
							<image src="/static/mengbanzu279(1).png" class="collect-img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	onMounted(() => {
		getData();
	})
	const recommendData = ref([]);

	function getData() {
		uni.request({
			url: "http://nocat.life:3017/foods/getRecommend"
		}).then((res) => {
			if (res.data.code == 200) {
				recommendData.value = res.data.data;
			}
		})
	}
</script>

<style scoped lang="scss">
	.container{
		margin-top: 26rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx 34rpx;
	}
	.product-img {
		width: 100%;
		height: 248rpx;
		border-radius: 8rpx;
	}

	.watch-img {
		margin-left: 5rpx;
		width: 28rpx;
		height: 22rpx;
	}

	.collect-img {
		margin-left: 5rpx;
		width: 24rpx;
		height: 24rpx;
	}
	.product-info-container{
	
	}
	.product-info{
		font-size: 22rpx;
		color: #aaaaaa;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>